<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .animate-card {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .animate-card-87 .animate-card__layer {
            width: 100%;
            height: 100%;
            transition: transform 0.5s;
            /* 只针对 transform 设置过渡 */

            &>img {
                width: 100%;
                height: 100%;
            }
        }

        .animate-card-87 .animate-card__sublayer {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            padding: 30px;
            transform: rotate(-45deg) scale(5);
            opacity: 0;
            text-align: center;
            color: #000;
            background-color: #fff;
            transition: opacity 0.5s ease, transform 0.5s ease;
            /* 分开 opacity 和 transform 的过渡 */
        }

        .animate-card-87:hover .animate-card__layer {
            transform: rotate(45deg) scale(5);
        }

        .animate-card-87:hover .animate-card__sublayer {
            opacity: 1;
            transform: rotate(0deg) scale(1);
            transition-delay: 0.175s;
            /* 提供延迟 */
        }


        .angry-grid {
            display: grid;

            grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

            gap: 0px;
            height: 100%;

        }

        #item-0 {

            background-color: #C8779F;
            grid-row-start: 2;
            grid-column-start: 2;

            grid-row-end: 4;
            grid-column-end: 4;

        }

        #item-1 {

            background-color: #6DBCFD;
            grid-row-start: 2;
            grid-column-start: 4;

            grid-row-end: 4;
            grid-column-end: 6;

        }

        #item-2 {

            background-color: #FDD7BB;
            grid-row-start: 2;
            grid-column-start: 6;

            grid-row-end: 4;
            grid-column-end: 8;

        }

        #item-3 {

            background-color: #9B5BC6;
            grid-row-start: 4;
            grid-column-start: 2;

            grid-row-end: 6;
            grid-column-end: 4;

        }

        #item-4 {

            background-color: #B8B69B;
            grid-row-start: 4;
            grid-column-start: 4;

            grid-row-end: 6;
            grid-column-end: 6;

        }

        #item-5 {

            background-color: #B9FDF5;
            grid-row-start: 4;
            grid-column-start: 6;

            grid-row-end: 6;
            grid-column-end: 8;

        }

        body {
            height: 100%;
            width: 100%;
        }

        html {
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="angry-grid">
        <div id="item-0">
            <div class="animate-card animate-card-87">
                <div class="animate-card__layer">
                    <img src="./img/松下.jpg" />
                </div>

                <div class="animate-card__sublayer">
                    <h3>
                        标题
                    </h3>
                    <div>
                        我是一段非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常长的描述
                    </div>
                </div>
            </div>

        </div>
        <div id="item-1">&nbsp;</div>
        <div id="item-2">&nbsp;</div>
        <div id="item-3">&nbsp;</div>
        <div id="item-4">&nbsp;</div>
        <div id="item-5">&nbsp;</div>
    </div>
</body>

</html>